<template>
  <div>
      <!-- 头部导航 -->
    <van-nav-bar :fixed="true" placeholder>
      <template #left>
        <img src="../../assets/toutiao_logo.png" alt="" />
      </template>
      <template #right>
        <van-icon name="search" size="0.48rem" />
      </template>
    </van-nav-bar>
    <!-- 标签栏 -->
    <van-tabs v-model="active"
    animated
    sticky
    offset-top="1.2266667rem"
    >
      <van-tab v-for="obj in userChannelList"
      :key="obj.id"
      :name="obj.id"
      :title="obj.name">
      <article-list :channelId="active"></article-list>
      </van-tab>
    </van-tabs>
    <!-- 底部反馈面板 -->
     <van-action-sheet v-model="$store.state.homeArticleActionShow"
      :actions="actionArr"
       :cancel-text="cancelText"
      @select="onSelect"
      @cancel="cancelFn"
      get-container="body"/>
  </div>
</template>

<script>
// 目标: 头部导航
// 1. 自定义左侧和右侧标题内容插槽技术
// 注意: icon要先去main.js注册才能使用
// 2. 定制了nav-bar-icon-color的less变量(cover.less)

// 目标: 标签栏铺设+动画
// 1. 查找文档, 找类似的 (重要: 先从基础开始用)
// 2. 修改+增加

// 目标: 频道数据铺设
// 1. 接口文档-频道数据
// 2. api/index.js接口方法
// 3. 引入Home/index.vue -> created里发请求
// 4. 把数据循环van-tab标签
// 5. cover.less, 下面小线段颜色
import { getUserChannelListAPI, dislikeArticleAPI } from '@/api'
import ArticleList from './ArticleList.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      active: 2,
      userChannelList: [],
      show: false,
      actionArr: [],
      cancelText: '取消'
    }
  },
  computed: {
    ...mapState(['firstActions', 'secondActions', 'actionArtId'])
  },
  methods: {
    ...mapMutations(['changeActionShowMutation']),
    async onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      console.log(item)
      if (item.name === '反馈垃圾内容') {
        // 切换actions数据源为二级反馈内容
        this.actionArr = this.secondActions
      } else if (item.name === '不感兴趣') {
        const res = await dislikeArticleAPI(this.actionArtId)
        console.log(res)
        this.changeActionShowMutation(false)
      }
    },
    cancelFn () {
      if (this.cancelText === '返回') {
        this.changeActionShowMutation(true) // 不能让弹出层关闭
        this.actionArr = this.firstActions // 切回一级反馈项目
        this.cancelText = '取消'
      }
    }
  },
  async created () {
    const res = await getUserChannelListAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    this.actionArr = this.firstActions
    this.cancelText = '返回'
  },
  components: {
    ArticleList
  }
}
</script>

<style scoped lang="less">
/deep/ .van-nav-bar__left img {
  width: 100px;
  height: 30px;
}
</style>
